<template>
	<!-- list组件，只有nvue页面有,并且只对app端有效,用来替代scroll-view的 -->
	<list class="list-container" :show-scrollbar="false" :bounce="false">
		<cell v-for="(item,index) in gifts" :key="index" :ref="'item'+index" class="flex align-center px-3 pt-3"
			insert-animation="default" delete-animation="default">
			<view class="flex align-center rounded-circle gift-item">
				<view class="p">
					<image :src="item.avatar" class="rounded-circle" mode="" style="width: 80rpx;height: 80rpx;">
					</image>
				</view>
				<view class="flex-1 flex flex-column justify-center">
					<text class="text-white font">{{item.username}}</text>
					<text class="text-white font-sm">送{{item.gift_name}}</text>
				</view>
				<view class="p">
					<image :src="item.gift_image" class="rounded-circle" mode="" style="width: 80rpx;height: 80rpx;">
					</image>
				</view>
			</view>
			<text class="text-warning font-lg ml-2">X {{item.num}}</text>
		</cell>
	</list>
</template>

<script>
	const dom = weex.requireModule('dom')
	export default {
		data() {
			return {
				gifts: []
			}
		},
		methods: {
			// 发送礼物
			send(gift) {
				this.gifts.push(gift)
				this.toBottom()
				this.autoHide()
			},
			// 置于底部,送礼物是跳到底部
			toBottom() {
				this.$nextTick(() => {
					let index = this.gifts.length - 1
					let ref = 'item' + index
					if (this.$refs[ref]) {
						dom.scrollToElement(this.$refs[ref][0], {})
					}

				})
			},
			// 自动消失
			autoHide() {
				if (this.gifts.length) {
					let timer = setTimeout(() => {
						this.gifts.splice(0, 1)
					}, 5000)
				}
			}
		}
	}
</script>

<style>
	.list-container {
		height: 500rpx;
		width: 520rpx;
	}

	.gift-item {
		width: 325rpx;
		border-radius: 162rpx;
		background-image: linear-gradient(to right, #BCABB1, #65AAF0);
	}
</style>
